<template>
  <div class="index">
    <div class="container">
      <v-gantt-chart
        :startTime="times[0]"
        :endTime="times[1]"
        :cellWidth="cellWidth"
        :cellHeight="cellHeight"
        :timeLines="timeLines"
        :titleHeight="titleHeight"
        :scale="scale"
        :titleWidth="titleWidth"
        showCurrentTime
        :hideHeader="hideHeader"
        :dataKey="dataKey"
        :arrayKeys="arrayKeys"
        :scrollToPostion="positionA"
        @scrollLeft="scrollLeftA"
        :datas="datasA"
      >
        <template v-slot:block="{ data, item }">
          <Test :data="data" :updateTimeLines="updateTimeLines" :cellHeight="cellHeight" :currentTime="currentTime" :item="item"></Test>
        </template>
        <template v-slot:left="{ data }">
          <TestLeft :data="data"></TestLeft>
        </template>
        <!-- <template v-slot:timeline="{ day , getTimeScales }">
          <TestTimeline :day="day" :getTimeScales="getTimeScales"></TestTimeline>
        </template> -->
        <template v-slot:title>铁胆火车侠日程表 </template>
      </v-gantt-chart>
      <v-gantt-chart
        v-if="!hideSecondGantt"
        :startTime="times[0]"
        :endTime="times[1]"
        :cellWidth="cellWidth"
        :cellHeight="cellHeight"
        :timeLines="timeLines"
        :titleHeight="titleHeight"
        :scale="scale"
        :titleWidth="titleWidth"
        showCurrentTime
        hideHeader
        :dataKey="dataKey"
        :arrayKeys="arrayKeys"
        :scrollToPostion="positionB"
        @scrollLeft="scrollLeftB"
        customGenerateBlocks
        :datas="datasB"
      >
        <template
          v-slot:block="{
            data,
            getPositonOffset,
            getWidthAbout2Times,
            isInRenderingTimeRange,
            startTimeOfRenderArea,
            endTimeOfRenderArea,
            isAcrossRenderingTimeRange,
          }"
        >
          <div
            class="gantt-block-item"
            v-for="(item, index) in data.gtArray"
            v-if="isInRenderingTimeRange(item.start) || isInRenderingTimeRange(item.end) || isAcrossRenderingTimeRange(item.start, item.end)"
            :key="item.id"
            :style="{
              left: getPositonOffset(item.start) + 'px',
              width: getWidthAbout2Times(item.start, item.end) + 'px',
            }"
          >
            <Test :data="data" :updateTimeLines="updateTimeLines" :cellHeight="cellHeight" :currentTime="currentTime" :item="item"></Test>
          </div>
        </template>
        <template v-slot:left="{ data }">
          <TestLeft :data="data"></TestLeft>
        </template>
        <template v-slot:title> 铁胆火车侠日程表 </template>
        <template v-slot:markLine="{ timeConfig, getPosition }">
          <TestMarkline :timeConfig="timeConfig" :getPosition="getPosition"></TestMarkline>
        </template>
      </v-gantt-chart>
    </div>
  </div>
</template>
<script>
  
</script>
<style scoped>
  /* @import url(); 引入css类 */
</style>
